<template>
  <view class="today" v-if="hots.length>0">
    <view class="content">
      <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" :circular="true" :touchable="true">
        <swiper-item v-for="(hot, index) in hots" :key="index" @click="goToHot(hot.product_id)" >
          <view class="item" v-if="hot.poster">
            <image class="poster" :src="hot.poster_url" ></image>
          </view>
          <view class="item" v-else>
            <view class="product" :style="{ backgroundColor: hot.back_color }">
              <image class="cover" :src="hot.product.cover_url" ></image>
              <view class="title" v-if="hot.title_alias" :style="{color: hot.title_alias_color}" >{{ hot.title_alias|ellipsis(22) }}</view>
							<view class="title" v-else>{{ hot.product.title|ellipsis(22) }}</view>
              <view class="prices">
                <view class="unit">￥</view>
                <view class="vip">{{ hot.product.price_lowest }}</view>
								<image src="/static/images/vip-price-icon.png" mode=""></image>
                <!-- <view class="normal">￥{{ hot.product.price_market }}</view> -->
              </view>
              <view class="hot-label" :style="{color: hot.label_text_color ? hot.label_text_color : '#ffffff',backgroundColor: hot.label_back_color ? hot.label_back_color : '#333333'}">
                <view class="text">{{ hot.label_text ? hot.label_text : '今日爆款' }}</view>
                <uni-icons size="14" type="arrowright" :color="hot.label_text_color ? hot.label_text_color : '#ffffff'" class="uni-icons"></uni-icons>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { getHotProducts } from "api/productApi";
import Pagination from "mixins/Pagination";

export default {
  name: "TodayHotProductsCom",
	mixins: [Pagination],
  data: () => ({
    hots: [],
		todayfresh:true
  }),
  methods: {
    async loadHotProducts() {
      const response = await getHotProducts({
        page: 1,
        "filter[is_today]": 1,
        include: 'product'
      })
      this.hots = response.data
    },
    goToHot(id) {
			uni.setStorage({
			    key:"newsTop",
			    data:0
			})
      uni.navigateTo({url: `/packs/pages/product/show?product_id=${id}`})
    },
		async refresh(){
			// await this.loadHotProducts()
		}
  },
  async created() {
    // await this.loadHotProducts()
  }
}
</script>

<style lang="scss" scoped>
.today {
  .content {
    .swiper {
      width: 350rpx;
      height: 536rpx;
      .item {
        border-radius: 16rpx;
        .poster {
          width: 350rpx;
          height: 536rpx;
          border-radius: 16rpx;
        }
        .product {
          width: 350rpx;
          height: 536rpx;
          border-radius: 16rpx;
          .cover {
            width: 330rpx;
            height: 330rpx;
            margin-top: 10rpx;
            margin-left: 10rpx;
          }
          .title {
            margin-left: 20rpx;
						margin-bottom: 8rpx;
            font-size: 28rpx;
            color: #333333;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						line-height: 36rpx;
						height: 72rpx;
          }
          .prices {
            display: flex;
            align-items: center;
            margin-left: 20rpx;
            margin-top: 2rpx;
            margin-bottom: 2rpx;
						height: 40rpx;
            .unit {
							font-size: 36rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FF0745;
            }
            .vip {
              font-size: 36rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #FF0745;
            }
            .normal {
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #333333;
							text-decoration: line-through;
            }
						>image{
							display: block;
							width: 68rpx;
							height: 28rpx;
							margin-left: 10rpx;
						}
          }
          .hot-label {
            width: 180rpx;
						height: 40rpx;
            display: flex;
            justify-content: center;
            margin:5rpx 0 0 20rpx;
						font-size:26rpx;
						border-radius:6rpx;
          }
        }
      }
    }
    .button {
      width: 236rpx;
      height: 56rpx;
      line-height: 56rpx;
      border: none;
      font-size: 28rpx;
      color: #F32747;
      background: #FFE066;
      position: absolute;
      bottom: -35rpx;
      left: 40rpx;
    }
  }
}

.uni-icons{
	margin-top:2rpx;
}

</style>
